prototype

我們在使用組件使用某些外部功能時，都需要使用import 將變數/方法載入進來，若是全局經常性複用，則會建議透過prototype掛載在vue的實體上。

我們應該要在 prototype 的命名加上 $ 符號當作前綴，主要是避免與組件內的方法名稱衝突到

As for the $ prefix, its purpose within the Vue ecosystem is special instance properties that are exposed to the user.

從這段話可以知道，Vue把這個 $ 符號用在公開的特殊實例屬性，例如:$router、$store、$root、$ref、$parent。

我們如何使用 prototype 呢?

import Vue from 'vue'
import VueCookies from 'vue-cookies'
import axios from 'axios'
Vue.prototype.$http = axios
Vue.prototype.$isDev = () => process.env.NODE_ENV === 'development'
Vue.prototype.$language = VueCookies.get('language') 

像這樣先寫好原型，我們就可以在任意地方調用，如this.$isDev()、this.$language、this.$http

整理一下複用的不同用途:
1.component: 視為一個完整的個體，有樣板能傳入props及傳出event
2.local mixins: 少部分元件會共用的函數
3.global mixins: 幾乎全局元件會共用到的函數
4.Vue.prototype: 與元件無相依性的函數或變數

我們可以用Vue.use(plugins)的方式，使用插件添加prototype，這個明天教

有任何問題歡迎下方留言，如果喜歡我的文章別忘了按讚、訂閱追蹤加分享唷!!
---我是分隔線-----------------------------------------------------------
PollyPO技術-前端設計轉前端工程師-JS踩坑雜記 30 天
喬依司-實作經典 JavaScript 30
五百億-Vue CLI + Firebase 雲端資料庫 30天打造簡易部落格及後臺管理
eien_zheng-前端小嘍嘍的Golang學習旅程_The journey of learning Golang